<template>
  <div class="head clearfix">
    <h1 class="pulll_left">
      <img src="/images/logo.png" alt="Logo" style="height: 32px; vertical-align: middle; margin-right: 10px;">
    综合审计视图
    </h1>
    
    <div class="menu menu2 pulll_left">
      <ul>      
        <li :class="{ active: currentTab === 'tianyan' }">
          <a href="#" @click.prevent="switchTab('tianyan')">综合概览</a>
        </li>
        <li :class="{ active: currentTab === 'zhihang' }">
          <a href="#" @click.prevent="switchTab('zhihang')">机构塑像</a>
        </li>
        <li :class="{ active: currentTab === 'renyuan' }">
          <a href="#" @click.prevent="switchTab('renyuan')">人员画像</a>
        </li>
        <li :class="{ active: currentTab === 'zichan' }">
          <a href="#" @click.prevent="switchTab('zichan')">资产质量</a>
        </li>

      </ul>
    </div>
    
    <div class="time" id="showTime">{{ currentTime }}</div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const currentTime = ref('')
const currentTab = ref('tianyan') // 默认显示天眼视图
let timer = null

// 定义 emit
const emit = defineEmits(['tabChange'])

// 切换标签页
const switchTab = (tab) => {
  currentTab.value = tab
  emit('tabChange', tab)
  console.log('HeaderComponent 切换到:', tab)
}

const updateTime = () => {
  const dt = new Date()
  const y = dt.getFullYear()
  const mt = dt.getMonth() + 1
  const day = dt.getDate()
  const h = dt.getHours()
  const m = dt.getMinutes()
  const s = dt.getSeconds()
  currentTime.value = `${y}/${mt}/${day} ${h}:${m}:${s}`
}

onMounted(() => {
  updateTime()
  timer = setInterval(updateTime, 1000)
})

onUnmounted(() => {
  if (timer) {
    clearInterval(timer)
  }
})
</script>

<style scoped>
.menu ul li.active a {
  color: #00d7e9;
  border-bottom: 2px solid #00d7e9;
}

/* 右上角时间样式 */
.time {
  /* 强制指定颜色，不受外部影响 */
  color: #00d7e9 !important;
  
  /* 字体样式 */
  font-family: 'Arial', 'Microsoft YaHei', sans-serif;
  font-size: 18px !important;
  font-weight: 600 !important;
  letter-spacing: 1px;
  
  /* 文字阴影，增加发光效果 */
  text-shadow: 
    0 0 10px rgba(0, 215, 233, 0.8),
    0 0 20px rgba(0, 215, 233, 0.5),
    0 2px 4px rgba(0, 0, 0, 0.5);
  
  /* 去掉背景和边框 */
  background: none !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  
  /* 过渡动画 */
  transition: all 0.3s ease;
  
  /* 确保不被其他样式覆盖 */
  display: inline-block;
  line-height: 1.5;
  white-space: nowrap;
}

/* 鼠标悬停效果 - 增强发光 */
.time:hover {
  text-shadow: 
    0 0 15px rgba(0, 215, 233, 1),
    0 0 25px rgba(0, 215, 233, 0.7),
    0 2px 4px rgba(0, 0, 0, 0.5);
  transform: scale(1.05);
}

/* 数字部分的样式增强 */
.time::before {
  content: '🕐 ';
  margin-right: 4px;
  opacity: 0.8;
}
</style>
